<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加课程</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <!--  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <link href="./static/bootstrap-fileinput/css/fileinput.css" rel="stylesheet">
    <script src="./static/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
    <script src="./static/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script><!--汉化中文语言包-->

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main .myform {
            width: 30%;
            margin-left: 40px;
        }

        main p {
            display: block;
            width: 100%;
            /* position: absolute;
            bottom: 20px; */
            text-align: center;
            margin: 20px 0;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <script>
        $(function (){
            initMenu();
        })

        /**
         * 初始化教师下拉菜单
         */
        function initMenu(){
            $.ajax({
                type:'get',
                url:'/SelectCourse2/teacher/queryList',
                cache: false,
                dataType: 'json',
                success:function (res){
                    console.log("请求老师数据：",res.result);
                    if(res.code == 1 && res.result){
                        // 动态生成下拉列表
                        $("#teacherId").append($(`
                              <option className = "disabled" readonly value="">请选择授课教师</option>
                        `))
                        for(let val of res.result){
                            $("#teacherId").append($(`
                                <option value="${val.userId}">${val.nickname}</option>
                            `))
                        }
                    }
                },
                error:function (err){
                    bootoast({
                        message: '服务器请求错误！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                }
            })
        }

    </script>
</head>

<body>
<div class="container-fluid my-container">
    <main>
        <!-- 路径导航 -->
        <ol class="breadcrumb" style="margin-top:5px;">
            <li><a href="#">主页</a></li>
            <li><a href="#">课程管理</a></li>
            <li class="active">添加课程</li>
        </ol>
        <!-- 表单 -->
        <h2>BootStrap FileInput 文件上传</h2>
        <form enctype="multipart/form-data">
            <label>Chinese Input</label>
            <div class="file-loading">
                <input id="uploadFile" name="file" type="file" >
            </div>
        </form>
        <hr>
        <h3>上传成功的图片显示在下面</h3>
        <div id="img_show"></div>
    </main>
    <!-- 尾部 -->
    <div class="footer">技术支持:计科B1902第三组</div>
</div>
<script type="text/javascript">
    $(function(){
        $('#uploadFile').fileinput({
            theme : 'explorer-fas',
            language: 'zh',
            uploadAsync: true, //默认异步上传
            showUpload: true,  //是否显示上传按钮
            showRemove :true, //显示移除按钮
            showPreview: true, // 显示预览信息： true 显示 , false 不显示
            showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
            showCaption: true, // 显示标题：true 显示 , false 不显示
            uploadUrl: 'http://localhost:8080/pet/goods/uploadImg', // 上传文件的url
            allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许文件扩展名
            browseClass: "btn btn-primary ",
            uploadExtraData: {kvId: '10'}, // 额外传输的参数
            dropZoneEnabled: false,//是否显示拖拽区域
            dropZoneTitle: '文件拖到这里即可上传！', // 拖拽区域提示内容
        });

        // fileuploaded 此事件仅针对ajax上传完成后触发， 可用于图片文件回显
        $('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
            var result = data.response ;

            console.log(result.result)
        });
    });
</script>
</body>
</html>